<template>
  <div class="company">
    <van-skeleton title :row="18" :loading="loading">
      <div class="top-wrap">
        <div class="wrap">
          <div class="left-wrap">
            <p class="company-name ellipsis">{{ info.cname }}</p>
            <div class="pro">
              <span>{{ info.industry_data }}</span>
              <span>{{ info.attr_data }}</span>
              <span>{{ info.size_data }}</span>
            </div>
          </div>
          <div class="right-wrap">
            <img :src="info.logo"/>
          </div>
        </div>
        <div class="tag">
      <span
          class="tag-item"
          v-for="(v, i) in info.welfare"
          :key="'welfare_' + i"
      >{{ v }}</span>
        </div>
      </div>
      <van-button type="info" round size="large" @click="connect" v-if="this.$root.userInfo && this.$root.userInfo.usertype==1">联系企业</van-button>
      <div class="show-wrap">
        <van-tabs v-model="active" color="#4771dc" title-active-color="#4771dc" swipeable>
          <van-tab title="公司介绍">
            <div class="intro" v-html="'简介：' + info.description"></div>
          </van-tab>
          <van-tab title="在招职位">
            <div class="showList">
              <job-list v-if="jobList.length>0" :list="jobList" :finished.sync="finished"
                        :loading.sync="loading"/>
              <div class="noData" v-if="jobList.length===0">
                <p>{{ finished ? '暂无数据' : '加载中...' }}</p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-skeleton>
  </div>
</template>

<script>
import { companyDetail,addChat1 } from '@/api/company'
import JobList from '@/components/job/job-list'

export default {
  name: 'Company',
  components: { JobList },
  data () {
    return {
      id: '',
      cityid: '',
      posttypeid: '',
      info: {},
      jobList: [],
      active: 0,
      finished: true,
      loading: true,
    }
  },
  created () {
    this.id = this.$route.query.id || ''
    this.fetchData()
  },
  mounted () {
  },
  methods: {
    connect () {
      addChat1({
        cid: this.id
      }).then(res => {
        if (res.code === 200) {
          this.$alertSuc('添加联系人成功，可进入交流平台进行交流');
        } else {
          this.$alertErr(res.msg || '网络错误！');
        }
      }).catch(err => {
        this.$alertErr(err || '网络错误！');
      })
    },
    toCheck (text) {
      return text.replace(/\n/g, '<br/>');
    },
    fetchData () {
      companyDetail({
        id: this.id,
        city_id: this.cityid,
        f_id: this.posttypeid,
      }).then(res => {
        this.loading = false
        if (res.code === 200) {
          res.data && res.data.company && (res.data.company.description = this.toCheck(res.data.company.description))
          this.info = res.data.company || {}
          this.jobList = res.data.job || []
          // this.search = res.data.searchDate;
          let timer = setTimeout(()=> {
            this.loading = false
            clearTimeout(timer)
            timer = null
          }, 1000)
        } else {
          this.$alertErr(res.msg || '网络错误！')
        }
      }).catch(err => {
        this.$alertErr(err || '网络错误！')
      })
    },
  },

}
</script>

<style lang="stylus" scoped>
.company {
  background: #f6f7f8;

  .top-wrap {
    background: #fff;
  }

  .wrap {
    display: flex;
    align-items: center;
    padding: 20px 20px 0 20px;

    .left-wrap {
      flex: 1;

      .company-name {
        max-width: 280px;
        font-size: 20px;
        color: $color-text;
      }

      .pro {
        margin: 15px 0;
        transform: scale(.8);
        transform-origin left center

        span {
          display: inline-block;
          color: #666;
          font-size: 12px;
          padding-right: 10px;
          margin-right: 10px;
          border-right: 1px solid #ebebeb;

          &:first-child {
            margin-left: 0;
          }

          &:last-child {
            margin: 0;
            border: 0;
          }
        }
      }
    }

    .right-wrap {
      flex: 0 0 60px;
      line-height: 60px;
      width: 60px;
      overflow: hidden;
      background: #fff;
      text-align: center;
      border: 1px solid #ebebeb;
      border-radius: 50%;

      img {
        width: 100%;
        vertical-align: middle;
      }
    }
  }

  .tag {
    padding: 0 25px;
    width: 125%;
    transform: scale(.8);
    transform-origin left

    span {
      font-size: 12px;
      color: $color-main;
      padding: 0 8px;
      display: inline-block;
      height: 28px;
      line-height: 28px;
      border: 1px solid $color-main;
      border-radius: 4px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }

  .show-wrap {
    margin-top: 10px;

    /deep/ .van-tabs {
      .van-tabs__wrap {
        height: 40px;
        border-bottom: 1px solid #f5f5f5;

        .van-tab {
          height: 40px;

          span {
            line-height: 40px;
            font-size: 16px;
            color: #333;
          }

          &.van-tab--active {
            span {
              color: $color-main;
            }
          }
        }

        .van-tabs__line {
          width: 65px;
        }
      }
    }

    .intro {
      background: #fff;
      padding: 20px;
      font-size: 12px;
      line-height: 24px;
      color: #666;
    }

    .noData {
      margin-top: 0;
      min-height: calc(100vh - 55px - 130px - 50px - 100px);
    }
  }
}
</style>

